<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器的权重</title>
    <style>
       #iddiv{
           background-color: blue;
       }
       
       div{
            background-color: yellow!important;
            /* !important优先级最高 */
        }
        .cdiv{
            background-color: red;
        }
        /* id选择器权重 > class > 元素 */
        div p{
               background-color: green;
         }
         div .pclass{
             background-color: wheat;
         }
        p{
            background-color: orange;
        }
       /* 包含选择符权重大于前三者 */
    </style>
</head>
<body>
    <div class="cdiv" id="iddiv" style="background-color:brown ;">11111111111111
        <!-- 内联样式要大于前四者 -->
        <p class="pclass">2222222222</p>
    </div>
<p>333333333333</p>
</body>
</html>